<template>
  <el-dialog
    v-model="visibility"
    :title="config.button.text.view"
    append-to-body
    width="65%"
    draggable
    :close-on-click-modal="false">
    <el-descriptions
      :column="appStore.column"
      border>
      <el-descriptions-item label="米厂全称"> {{ props.rowData.fullName }} </el-descriptions-item>
      <el-descriptions-item label="米厂简称"> {{ props.rowData.simpleName }} </el-descriptions-item>
      <el-descriptions-item label="启用状态">
        {{ props.rowData.isEnable ? config.button.text.enable : config.button.text.stop }}
      </el-descriptions-item>
      <el-descriptions-item label="备注信息"> {{ props.rowData.remark }} </el-descriptions-item>
      <el-descriptions-item label="创建人"> {{ props.rowData.createUserRealName }} </el-descriptions-item>
      <el-descriptions-item label="创建时间"> {{ formatDateTime(props.rowData.createTime) }} </el-descriptions-item>
      <el-descriptions-item label="修改人"> {{ props.rowData.updateUserRealName }} </el-descriptions-item>
      <el-descriptions-item
        label="上次修改时间"
        :span="2">
        {{ formatDateTime(props.rowData.updateTime) }}
      </el-descriptions-item>
      <el-descriptions-item label="资质图片">
        <UploadFile
          ref="uploadRef"
          :show="false"
          :file-uuids="fileDataList" />
      </el-descriptions-item>
    </el-descriptions>
    <el-dialog
      title="预览"
      v-model="dialogVisible">
      <img
        w-full
        :src="dialogImageUrl"
        alt="Preview Image" />
    </el-dialog>
    <template #footer>
      <div>
        <el-button
          type="warning"
          v-if="appStore.isPhone"
          @click="editInfo">
          {{ config.button.text.edit }}
        </el-button>
        <el-button @click="visibility = false">{{ config.button.text.close }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import config from "@/common/element-plus/config";
import ApiBaseRiceBarn from "@/api/modules/base-rice-barn";
import { useAppStore } from "@/stores/app";
import { formatDateTime } from "@/common/utils/date";
import UploadFile from "@/components/UploadFile.vue"

const appStore = useAppStore()

const visibility = ref(false)

const props = defineProps(["rowData"])
const fileDataList = ref()
const dialogImageUrl = ref("")
const dialogVisible = ref(false)
const imageList = ref([]);

const emits = defineEmits(["editInfo"])
const editInfo = () => {
  visibility.value = false;
  emits("editInfo", props.rowData);
}

watch(() => visibility.value, (newVal) => {
  if (newVal) {
    if (props.rowData.fileDataJson && Array.isArray(JSON.parse(props.rowData.fileDataJson))) {
      fileDataList.value = JSON.parse(props.rowData.fileDataJson);
      if (fileDataList.value.length > 0) {
        getImageList();
      }
    } else {
      fileDataList.value = []
    }
  }
}, { immediate: true })

//获取图片列表
const getImageList = async () => {
  let res = await ApiBaseRiceBarn.getPicture(fileDataList.value);
  imageList.value = res.data;
}

defineExpose({ visibility })
</script>

<style lang="scss" scoped>
:deep(.el-descriptions__label) {
  min-width: 110px;
}
</style>
